// --------------------------------------------------
// 警告框
// @Author: steven.wjx
// @Date:   2020-03-05 13:17:50
// --------------------------------------------------

.#{$ui-name}alert {
    position: relative;
    line-height: 1.56;
    color: $text-color;
    font-size: $font-size;
    font-weight: 600;
    padding: 8px 15px;
    margin-bottom: 15px;
    border: 1px solid transparent;
    border-radius: $border-radius/2;

    .#{$ui-name}alert-desc {
        font-size: ceil($font-size/1.5);
        color: $text-color-secondary;
        font-weight: normal;
    }

    .#{$ui-name}alert-icon {
        position: absolute;
        top: 8px;
        left: 15px;
        font-size: ceil($font-size*1.4);
        font-weight: normal;
    }

    .#{$ui-name}alert-close-icon {
        position: absolute;
        top: 8px;
        right: 15px;
        font-size: ceil($font-size*1.4);
        font-weight: 400;
        color: $text-color-secondary;
    }

    &.#{$ui-name}alert-has-icon {
        padding-left: 40px;
    }

    &.#{$ui-name}alert-has-desc {
        padding-left: 45px;

        .#{$ui-name}alert-icon {
            font-weight: normal;
            font-size: ceil($font-size*1.7);
        }
    }

    &.#{$ui-name}alert-has-close {
        padding-right: 40px;
    }

    .#{$ui-name}alert-link {
        font-weight: bold;
    }
}

.#{$ui-name}alert-info {
    @include alert-variant($primary-color);
}

.#{$ui-name}alert-success {
    @include alert-variant($success-color);
}

.#{$ui-name}alert-warning {
    @include alert-variant($warning-color);
}

.#{$ui-name}alert-danger {
    @include alert-variant($danger-color);
}